import React, { useState } from "react";
import { Form, Input } from "antd-mobile";
import { NavBar } from "react-vant";
import { useNavigate } from "react-router-dom";
import { Notify } from "react-vant";
import axios from "axios";
axios.defaults.baseURL = 'http://localhost:3000/ybk';
import './ybk.css';
import { Button } from "react-vant";
import { IconFont } from "tdesign-icons-react";


export default function Phone() {
  let navigate = useNavigate();
  //手机号
  let [phone, setphone] = useState("");
  //验证码
  let [Yzm, setYzm] = useState("");

  //后端返回的验证码
  let [ma, setma] = useState("");

  //获取验证码
  let getcode = async (e) => {
    // console.log("aaaaa", ma);
    if (phone.length === 0) {
      Notify.show({ type: "danger", message: "请输入手机号" });
    } else {
      let {
        data: { code, msg },
      } = await axios.post(`/getCode?phone=${phone}`, );
      console.log("code", code);
      console.log("msg", msg);
      
      setma(code);
      console.log("code", ma);
      let time = 60;
      let timer = setInterval(() => {
        time--;
        e.target.innerHTML = `剩余${time}秒`;
        if (time === 0) {
          e.target.innerHTML = `获取验证码`;
          clearInterval(timer);
        }
      }, 1000);
    }
  };
  //登录
  let login = async () => {
    if (Number(Yzm) === Number(ma) && Yzm.length !== 0) {
      let {
        data: { code, result, Accesstoken, Refreshtoken },
      } = await axios.post("/phonelogin", { phone });
      if (code === 200) {
        Notify.show({ type: "success", message: "登录成功" });
        localStorage.setItem('userid',info.userid)
        alert("登录成功");
        navigate("/index");
      }
    } else {
      Notify.show({ type: "danger", message: "验证码不一致" });
    }
  };
  return (
    <div>
      <div
        style={{
          textAlign: "center",
          marginTop: "10rem",
          marginBottom: "10rem",
        }}
      >
        <div
          style={{
            width: "20rem",
            height: "20rem",
            lineHeight: "30rem",
            backgroundColor: "var(--item-bgc)",
            borderRadius: "50%",
            textAlign: "center",
            margin: "0 auto",
          }}
        >
          <img src="../public/img/sdd1.png" alt="" className="ljyimg" />
        </div>
      </div>
      <div className="phoneLogin">
        <div className="header">
          {/* <NavBar onClickLeft={() => navigate(-1)} /> */}
        </div>
        <div className="phoneContext">
          <Form layout="horizontal">
            <Form.Item
              name="phone"
              label="手机号"
              rules={[
                {
                  validator: (_, value) => {
                    if (/^1\d{10}$/.test(value)) {
                      return Promise.resolve(true);
                    }
                    return Promise.reject(new Error("请输入正确的手机号码"));
                  },
                },
              ]}
            >
              <Input
                placeholder="请输入11位手机号码"
                value={phone}
                onChange={(e) => {
                  setphone(e);
                }}
                className="phone"
              />
            </Form.Item>
            <Form.Item
              label="短信验证码"
              extra={
                <div>
                  <a
                    style={{ color: "#23beae" }}
                    onClick={(e) => {
                      getcode(e);
                    }}
                  >
                    获取验证码
                  </a>
                </div>
              }
            >
              <Input
                placeholder="验证码"
                value={Yzm}
                onChange={(e) => {
                  setYzm(e);
                }}
              />
            </Form.Item>
          </Form>
        </div>
        <Button
          round
          nativeType="submit"
          type="primary"
          block
          onClick={login}
          className="ljycode"
        >
          登录
        </Button>
        <div
          className="register"
          style={{ textAlign: "center", marginTop: "2rem" }}
        >
          <a
            href="../register"
            style={{
              color: "red",
              fontSize: "3rem",
              textDecoration: "underline",
            }}
          ></a>
        </div>
      </div>
      <div className="ljyother">
        <div>
          <button className="ljyqi">其他方式登录</button>
        </div>
        <div className="ljybox">
          <div onClick={()=>Navigate("/face")}>
            <IconFont name="scan" />
          </div>
          <div onClick={() => Navigate("/code")}>
            <IconFont name="mobile" />
          </div>
        </div>
      </div>
    </div>
  );
}
